<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="bg-white" v-if="flowList.length>2">
					<view class="d-flex py-1">
						<view class="d-flex  flex-1 j-center a-center" v-for="(item,index) in flowTab" :key="index"  @click="flow(index)">
							<text class="py-2" :class="[index==flowIndex ? 'active_flow':'']">{{item.name}}</text> 
						</view>
					</view>
			</view>
			
			<view class="m-2 bg-white rounded-20">
				<view class="today_title rounded-top p-3">
					<view class="d-flex j-sb ">
						<view class="d-flex a-center">
							<view class=""><text>快递方式：{{flowList[0].shipping_name}}</text></view>
						</view>
					</view>
					<view class="">运单编号：{{order_detail.invoice_no[0]?order_detail.invoice_no[0]:"没有填写"}}</view>
				</view>
				<view class="p-3 rounded-bottom">
					<view class="d-flex">
						<image class="today_hot" :src="flowList[0].goods_items[0].img.url" mode=""></image>
						<view class="mx-2 mt-1">
							<view class="">{{flowList[0].goods_items[0].name}}</view>
							<view class="text-light-muted my-1">属性：500g</view>
							<view class=""><text class="font-31 font-weight">{{order_detail.formated_total_fee}}</text><text class="ml-4 text-muted">x{{flowList[0].goods_items[0].number}}</text></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="m-2 bg-white rounded-20 d-flex">
				<view class="py-4 px-4 d-flex a-center">
					<view class="mr-2 d-flex flex-column line_line j-center pt-4">
						<u-icon name="checkmark-circle-fill" color="#fd7901" size="28"></u-icon>
						<view class="line pb-1 mr-1"></view>
					</view>
					<view class="wuliu">
						<view class="">{{flowList[0].content.context}}</view>
						<view class="">{{flowList[0].content.time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flowTab:[{id:1,name:"订单1"},{id:2,name:"订单2"}],
				flowIndex:0,
				order_id:0, // 订单ID
				flowList:"", // 物流列表
				u_loadmore:true, // 加载中
				order_detail:"", // 订单详情
			}
		},
		methods: {
			flow(i){
				this.flowIndex=i
			}
		},
		onLoad(e) {
			this.order_id=e.order_id
			this.$H.post("admin/order/express",{order_id:this.order_id}).then(res=>{
				this.flowList=res.data
			})
			this.$H.post("admin/orders/detail",{id:this.order_id}).then(res=>{
				this.order_detail=res.data
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	.active_flow{
		border-bottom: 7rpx solid #f63a31;
		color: #f63a31;
	}
	.today_title{
		background-color: #f6efef;
	}
	.today_hot{
		width: 150upx;
		height: 150upx;
	}
	.wuliu{
		color: #fdb098;
	}
	.line{
		width: 2upx;
		height: 100%;
		background-color: #e1e1e1;
	}
	.line_line{
		height: 100upx;
	}
</style>
